<template>
	<view class="businessInfo">
		<u-form :model="dataForm" ref="uForm">
			<u-form-item label="超级管理员姓名" label-width='220' prop="contact_name" required>
				<u-input v-model="dataForm.contact_name" input-align='right' placeholder="请输入超级管理员姓名" />
			</u-form-item>
			<u-form-item label="超级管理员身份证" label-width='220' prop="contact_id_number" required>
				<u-input v-model="dataForm.contact_id_number" input-align='right' placeholder="请输入超级管理员身份证" />
			</u-form-item>
			<u-form-item label="超级管理员电话" label-width='220' prop="mobile_phone" required>
				<u-input v-model="dataForm.mobile_phone" input-align='right' placeholder="请输入超级管理员电话" />
			</u-form-item>
			<u-form-item label="超级管理员邮箱" label-width='220' prop="contact_email" required>
				<u-input v-model="dataForm.contact_email" input-align='right' placeholder="请输入超级管理员邮箱" />
			</u-form-item>
			<u-form-item label="个体户经营者" label-width='220' prop="legal_person" required>
				<u-input v-model="dataForm.legal_person" input-align='right' placeholder="请输入个体户经营者" />
			</u-form-item>


			<u-form-item label="法人姓名" label-width='220' prop="id_card_name" required>
				<u-input v-model="dataForm.id_card_name" input-align='right' placeholder="请输入法人姓名" />
			</u-form-item>
			<u-form-item label="法人身份证号码" label-width='220' required prop="id_card_number">
				<u-input v-model="dataForm.id_card_number" input-align='right' placeholder="请输入法人身份证号码" />
			</u-form-item>
			<u-form-item label="法人身份证人像面" label-width='280' prop="id_card_copy" required>
				<view class="" @click="onUpload('id_card_copy')">
					<view class="businessInfo_img" v-if="!dataForm.id_card_copy">+</view>
					<image class="businessInfo_img" :src="dataForm.id_card_copy" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>
			<u-form-item label="法人身份证国徽面" label-width='280' prop="id_card_national" required>
				<view class="" @click="onUpload('id_card_national')">
					<view class="businessInfo_img" v-if="!dataForm.id_card_national">+</view>
					<image class="businessInfo_img" :src="dataForm.id_card_national" mode="aspectFill" v-else></image>
				</view>
			</u-form-item>

			<u-form-item label="法人身份证开始时间" label-width='280' prop="card_period_begin" required>
				<u-input v-model="dataForm.card_period_begin" input-align='right' type="select"
					@click='onStartTime("card_period_begin")' placeholder="请选择开始时间" />
			</u-form-item>
			<u-form-item label="法人身份证结束时间" label-width='280' prop="card_period_end" required>
				<u-input v-model="dataForm.card_period_end" input-align='right' type="select"
					@click='onEndTime("card_period_end")' placeholder="请选择结束时间" />
			</u-form-item>

		</u-form>
		<view class="u-flex">
			<u-button type="primary" class="flex_1 u-m-r-20" @click="onPreviousStep">上一步</u-button>
			<u-button type="error" @click="onSubmit" class="flex_1">下一步</u-button>
		</view>
		<u-picker mode="time" v-model="timeShow" :params="timeParms" @confirm='onConFirmTime' />

	</view>
</template>

<script>
	import weChatMxins from '../../mxins/index.js'
	export default {
		mixins: [weChatMxins],
		data() {
			return {
				dataForm: {
					contact_name: '', //超级管理员姓名
					contact_id_number: '', //超级管理员身份证号码（超级管理员签约时，会校验微信号绑定的银行卡实名信息，是否与该证件号码一致）
					mobile_phone: '', //联系电话
					contact_email: '', //联系邮箱
					legal_person: '', //个体户经营者 / 法人姓名
					id_card_copy: '', //身份证人像面照片
					id_card_national: '', //身份证国徽面照片
					id_card_name: '', //身份证国徽面照片
					id_card_number: '', //身份证号码
					card_period_begin: '', //身份证有效期开始时间
					card_period_end: '', //身份证有效期结束时间
				},
				qualifications: false, //资质补充
				qualificationsList: [{
					image: '',
					id: 0
				}, {
					image: '',
					id: 1
				}, {
					image: '',
					id: 2
				}],
				supplement: false, //补充材料
				supplementList: [{
					image: '',
					id: 0
				}, {
					image: '',
					id: 1
				}, {
					image: '',
					id: 2
				}, {
					image: '',
					id: 3
				}, {
					image: '',
					id: 4
				}],

				typeTime: '', //当前选择的日期类型 用于判断是开始时间还是结束时间
				timeParms: {
					year: true,
					month: true,
					day: true,
				},
				timeShow: false, //时间选择器
				btnStyle: { //按钮样式
					flex: 1
				},
				rules: { //表单验证
					contact_name: {
						required: true,
						message: '请输入超级管理员姓名',
						trigger: 'blur',
					},
					legal_person: {
						required: true,
						message: '请输入个体户经营者',
						trigger: 'blur',
					},
					id_card_copy: {
						required: true,
						message: '请选择法人身份证人像面',
						trigger: 'change',
					},
					contact_id_number: {
						required: true,
						message: '请输入超级管理员身份证号码',
						trigger: 'blur',
					},
					id_card_national: {
						required: true,
						message: '请选择法人身份证国徽面',
						trigger: 'change',
					},
					id_card_name: {
						required: true,
						message: '请输入身份证姓名',
						trigger: 'blur',
					},
					id_card_number: {
						required: true,
						message: '请输入法人身份证号码',
						trigger: 'blur',
					},
					card_period_begin: {
						required: true,
						message: '身份证开始日期',
						trigger: 'change',
					},
					card_period_end: {
						required: true,
						message: '身份证结束日期',
						trigger: 'change',
					},

					contact_email: {
						required: true,
						message: '请输入邮箱',
						trigger: 'blur',
					},
					card: {
						required: true,
						message: '请输入身份证',
						trigger: 'blur',
					},
					mobile_phone: {
						required: true,
						message: '请输入手机号',
						trigger: 'blur',
					},
				}
			};
		},

		methods: {
			onSubmit() {
				if (!this.sumbitShow) {
					this.$emit('stepsCallback', 2)
					return
				}
				this.$refs.uForm.validate(valid => {
					if (!valid) return
					this.$emit('stepsCallback', 2)
				});
			},
			onPreviousStep() {
				this.$emit('stepsCallback', 0)
			},

			onStartTime(name) {
				this.typeTime = name
				this.timeShow = true
			},
			onConFirmTime(time) {
				let {
					day,
					month,
					year
				} = time
				let {
					typeTime
				} = this
				let timeDate = `${year}-${month}-${day}`
				this.$set(this.dataForm, typeTime, timeDate)
			},
			onEndTime(name) {
				let $this = this
				$this.typeTime = name
				let itemList = ['选择日期', '长期']
				uni.showActionSheet({
					itemList,
					success: function(res) {
						console.log(res.tapIndex)
						if (res.tapIndex == 1) {
							// 直接赋值长期
							$this.$set($this.dataForm, name, '2999-12-01')
							return
						}
						// 打开日期选择
						$this.timeShow = true

					},
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.businessInfo {
		padding: 0 35rpx;
		background-color: #ffffff;
		margin-top: 50rpx;

		.businessInfo_img {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid rgba(0, 0, 0, .1);
			margin-left: auto;
			color: #999999;
			font-size: 45rpx;
		}

		.flex_1 {
			flex: 1;
		}
	}
</style>
